<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./favicon.ico">
    <title>test_html</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        html,
        body {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }
        
        .all {
            height: 100%;
            width: 100%;
            overflow: auto;
        }
        
        #test {
            /**
            width: 100%;
            height: 100%;
            */
        }
        
        .topic-image {
            visibility: hidden;
            cursor: pointer;
        }
        
        .x6-node:hover .topic-image {
            visibility: visible;
        }
        
        .x6-node-selected rect {
            stroke-width: 2px;
        }
    </style>
    <script src="jquery-3.6.min.js"></script>
    <script type="module" src="x6.min.js"></script>
    <script type="module" src="x6.layout.min.js"></script>
    <script type="module" src="hierarchy.js"></script>
    <script src="mock.js"></script>
    <link rel="stylesheet" href="./mod/style/main.css">
    <link rel="stylesheet" href="./mod/style/actionMod.css">

</head>

<body>

    <div class="all">
        <div id="container">container</div>
    </div>
    <script type="module">
        import x6MainFn from "./mod/x6Main/index.js"; import { addBtnChildrenTool, addBtnParentTool, decreaseBtnChildrenTool,decreaseBtnParentTool } from "./mod/x6Main/tools.js"; import actionMod from "./mod/html/actionMod.js"; import mainModFn from "./mod/html/mainMod.js";
        window.mainModFn = mainModFn; window.x6MainFn = x6MainFn; window.decreaseBtnParentTool = decreaseBtnParentTool; window.addBtnChildrenTool = addBtnChildrenTool; window.addBtnParentTool = addBtnParentTool; window.decreaseBtnChildrenTool = decreaseBtnChildrenTool;
        window.actionMod = actionMod; import nodeJsonStr from "./nodeJsonStr.js"; window.nodeJsonStr = nodeJsonStr; import edgeJsonStr from "./edgeJsonStr.js"; window.edgeJsonStr = edgeJsonStr;
    </script>
    <script type="text/javascript">
        var graph;
        var nodeData;
        var mainFn = {};
        var rootId;
        var ranksep = 100;
        var nodesep = 25;
        var selectNode = {}; //选中节点
        var Graph;
        var Model;

        $(document).ready(function() {
            console.log("Hierarchy", Hierarchy)
            setTimeout(function() {
                init()
                getData()
            }, 300)

        })

        //初始化
        function init() {
            Graph = X6.Graph;
            Model = X6.Model;
            console.log("Graph", Graph);
            console.log("Model", Model);
            console.log("X6", X6);
            graph = new X6.Graph({
                container: document.getElementById('container'),
                width: 1900,
                height: 1000,
                scroller: {
                    enabled: false, //滚动
                    className: "my-scroller",
                },
                panning: {
                    // enabled: true, //画布可以平移
                    //还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。
                    eventTypes: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
                },
                // interacting: { nodeMovable: false },
                // async: true,
                // frozen: true,
                scroller: false,
                // interacting: false,
                background: {
                    color: "#fffbe6", // 设置画布背景颜色
                },
                // selecting: {
                // enabled: true,
                // rubberband: true,
                // showNodeSelectionBox: true,
                // },
                grid: {
                    size: 10, // 网格大小 10px
                    visible: true, // 渲染网格背景
                },
                interacting: {
                    'nodeMovable': true, // 节点是否可以被移动。
                },
                connecting: {
                    connector: 'smooth',
                },
            });
            console.log("graph", graph);
            mainFn = x6MainFn(graph);
        }

        //获取数据并布局
        function getData() {
            fetch('./algorithm-category.json')
                .then((response) => response.json())
                .then((data) => {
                    console.log("then", data)
                    console.log(" Hierarchy.mindmap", Hierarchy.mindmap)
                    const result = Hierarchy.mindmap(data, {
                        direction: 'LR',
                        getHeight() {
                            return 56
                        },
                        getWidth() {
                            return 160
                        },
                        getHGap() {
                            return 30
                        },
                        getVGap() {
                            return 16
                        },
                        getSide: () => {
                            return 'right'
                        },
                    })

                    const model = Model.FromJSONData = {
                        nodes: [],
                        edges: []
                    }


                    const traverse = (data) => {
                        console.log("traverse -data", data)
                        if (data) {
                            model.nodes ? model.nodes.push({
                                id: `${data.id}`,
                                x: data.x + 250,
                                y: data.y + 250,
                                shape: 'rect',
                                width: 200,
                                height: 60,
                                attrs: {
                                    body: {
                                        fill: '#5F95FF',
                                        stroke: 'transparent',
                                    },
                                },
                                ports: [{
                                    id: 'port_' + data.id,
                                    position: 'left',
                                    attrs: {
                                        circle: {
                                            magnet: false,
                                            stroke: 'transparent',
                                            strokeWidth: 1,
                                            fill: 'red',
                                            stroke: '#red',
                                            r: 0,
                                            rx: 100,

                                        },
                                    },

                                }],
                            }) : ""
                        }
                        if (data.children) {
                            data.children.forEach((item) => {
                                model.edges ? model.edges.push({
                                    source: `${data.id}`,
                                    target: {
                                        port: "port_" + item.id
                                    },
                                    attrs: {
                                        line: {
                                            stroke: '#A2B1C3',
                                            strokeWidth: 1,
                                            //targetMarker: null,
                                        },
                                    },
                                    zIndex: -1
                                }) : ""
                                traverse(item)
                            })
                        }
                    }
                    console.log("traverse(result)", result)
                    traverse(result)

                    graph.fromJSON(model)
                })
        }
    </script>
</body>

</html>